<template>
  <div>
    <!-- 顶部分页列表 -->
    <div style="position: fixed;z-index: 999;width: 100%">
      <van-tabs @click="changeChannel" v-model="active" >
        <van-tab v-for="(item, index) in channel" :key="index" :title=item.name :name=item.id></van-tab>
      </van-tabs>
    </div>

    <!-- 笔记主体 -->
    <div v-if="!isVideo">
      <van-pull-refresh v-model="isRefresh" @refresh="onRefresh()">
        <div v-infinite-scroll="loadMore"
             infinite-scroll-distance="2"
             style="padding: 7vh 0 7vh 0">
          <note :note="note"/>
        </div>
      </van-pull-refresh>
    </div>

    <!-- 底部导航条 -->
    <tabbar />

		<div class="video-section" v-if="isVideo">
			<div v-for="(item,i) in videoList" :key="i" style="margin-bottom: 30px">
				<p class="video-title">{{item.title}}</p>
				<video 
					:id="'myVideo'+item.id" 
					class="video-js vjs-big-play-centered"
					controls
					preload="auto"
					width="300px"
					height="150px"
				>
					<source :src="item.src" type="video/mp4">
				</video>
			</div>
		</div>
  </div>
</template>

<script>
import Tabbar from "../components/Tabbar.vue";

import {Toast} from 'vant';
import Note from "../components/Note";

export default {
  components: {Tabbar, Note},
  data() {
    return {
			isVideo: false,
      //刷新状态
      isRefresh: false,
      //当前选中的频道id
      active: "",
      //频道
      channel: [{
        id: "",
        name: ""
      }],
      // 笔记
      note: [{
        id: "",
        img: "",
        isLiked: false,
        likeNum: 0,
        title: "",
        userId: "",
        userImg: "",
        userName: ""
      }],
      //当前页码
      current: 1,
      pages: 0,
			videoList:[]
    };
  },
  mounted() {
    // 调用
    this.onload();
		// this.initVideo();
  },
  methods: {
    changeChannel() {
			if(this.active == '1003'){
				this.isVideo = true;
			}else{
				this.isVideo = false;
			}
      this.note = [];
      this.current = 1;
      this.pageNote(this.active, this.current);
      this.current++;
    },

    loadMore() {
      if (this.current <= this.pages) {
        this.pageNote(this.active, this.current)
        this.current++;
      }
    },

    onRefresh() {
      setTimeout(() => {
        Toast('刷新成功');
        this.isRefresh = false;
        this.changeChannel();
      }, 1000);
    },

    onload() {
      this.http.get("/api/lj/channel/list").then((res) => {
        this.channel = [];
        for (let i in res.data.data) {
          this.channel.push({
            id: res.data.data[i].id,
            name: res.data.data[i].name,
          });
        }
        this.active = this.channel[0].id;
        this.changeChannel();
      })
    },

    pageNote(channelId, current) {
			if(this.active === '1003'){
				this.http.post("/api/lj/noteVideo/page",{
					channelId: channelId,
					currentPage: current,
					pageSize: 10
				}).then((res)=>{
					this.pages = res.data.data.pages;
					const temp = res.data.data.records;
					temp.map((item)=>{
						this.videoList.push({
							src:item.imgs ? JSON.parse(item.imgs)[0] : '',
							id:item.id,
							pic:item.pic,
							title:item.title,
						})
					})
				})
				console.log('this.', this.videoList)
				return
			}
      this.http.post("/api/lj/note/page", {
        channelId: channelId,
        currentPage: current,
        pageSize: 10
      }).then((res) => {
        this.pages = res.data.data.pages;
        for (let i in res.data.data.records) {
          this.note.push({
            id: res.data.data.records[i].id,
            img: res.data.data.records[i].imgs ? res.data.data.records[i].imgs[0] : "",
            isLiked: res.data.data.records[i].isLiked,
            likeNum: res.data.data.records[i].likeNum,
            title: res.data.data.records[i].title,
            userId: res.data.data.records[i].userId,
            userImg: res.data.data.records[i].userImg,
            userName: res.data.data.records[i].userName
          })
        }
      });
    },
  },
};
</script>

<style scoped>
.video-section{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding-top: 66px;
}
.video-title{
	font-size: 20px;
  font-weight: 600;
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal; 
}
</style>
